<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索老师:">
                <a-input
                  v-model="keywords"
                  placeholder="请输入老师姓名(回车搜索)"
                  @pressEnter="$refs.table.refresh(true)"
                  style="width: 80%"
                >
                  <a-tooltip slot="suffix" title="请输入老师姓名">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="上课时间:">
                <!-- <a-month-picker placeholder="请选择月份" @change="monthChange" style="width: 80%" /> -->
                <a-range-picker style="width: 80%"  v-model="classTime" @change="dateChange"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="btn-list">
        <a-button type="primary" class="mr10" @click="exportDetails"> 导出明细 </a-button>
        <a-button class="mr10" @click="goAdd">快速结算工资</a-button>
      </div>
      <div>
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          showPagination="auto"
          class="user_management_table"
          :pagination="pagination"
        >
          <!-- 表格头部插入 -->
          <span slot="daoke">
            <a-tooltip>
              <template slot="title">不包含补课和试听类型的学员</template>
              到课(含迟到)
            </a-tooltip>
          </span>
          <span slot="qingjia">
            <a-tooltip>
              <template slot="title">仅包含请假未补的学员(不包含补课和试听类型的学员)</template>
              请假
            </a-tooltip>
          </span>
          <span slot="weidao">
            <a-tooltip>
              <template slot="title">仅包含未到未补的学员(不包含补课和试听类型的学员)</template>
              未到
            </a-tooltip>
          </span>
          <span slot="queke">
            <a-tooltip>
              <template slot="title">原课次缺课并完成补课的学员(不包含补课和试听类型的学员)</template>
              缺课已补
            </a-tooltip>
          </span>
          <!-- 数据 -->
          <span slot="sum_price" slot-scope="text, record"> ￥{{ record.sum_price }} </span>
        </s-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { achievementList, achievementExport } from '@/api/wageSettlement'
// import CountDown from '@/components/CountDown/CountDown.vue'
import moment from 'moment'
export default {
  components: { STable },
  data() {
    return {
      classTime:[],
      keywords: '',
      queryParam: {
        school_id: this.$store.state.user.school,
        start_time:'',
        end_time:''
      },
      columns: [
        {
          title: '老师姓名',
          dataIndex: 'name',
          width: 200,
        },
        {
          title: '老师课时',
          dataIndex: 'teacher_hour',
          width: 100,
        },
        {
          title: '学员课时',
          dataIndex: 'student_hour',
          width: 100,
        },
        {
          title: '课消金额',
          scopedSlots: { customRender: 'sum_price' },
          width: 100,
        },
        {
          slots: { title: 'daoke' },
          dataIndex: 'coming_num',
          width: 100,
          // title: '到课(含迟到)',
        },
        {
          slots: { title: 'qingjia' },
          dataIndex: 'leave_num',
          width: 100,
        },
        {
          // title: '未到',
          slots: { title: 'weidao' },
          dataIndex: 'not_coming_num',
          width: 100,
        },
        {
          // title: '缺课已补',
          slots: { title: 'queke' },
          dataIndex: 'has_absence_num',
          width: 100,
        },
        {
          title: '试听',
          dataIndex: 'audition_num',
          width: 100,
        },
        {
          title: '补课',
          dataIndex: 'make_up_num',
          width: 100,
        },
      ],
      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return achievementList(Object.assign(parameter, this.queryParam, { name: this.keywords })).then((res) => {
          // this.pageNo = Number(parameter.pageNo)
          return res
        })
      },
      school_id: this.$store.state.user.school,
    }
  },
  created() {
    let {startDay,endDay}=this.getStartDay()
    // this.queryParam.classTime.push(moment(startDay))
    // this.queryParam.classTime.push(moment(endDay))
    // this..$set()classTime
    this.queryParam.start_time=startDay
    this.queryParam.end_time=endDay
    this.$set(this.classTime,0,moment(startDay))
    this.$set(this.classTime,1,moment(endDay))
    console.log(this.classTime,9);
  },
  watch: {
    queryParam: {
      handler() {
        this.$refs.table.refresh(true)
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true, // 开启深度监听，默认是false
    },
  },
  methods: {
    //获取本月第一天和最后一天
    getStartDay() {
      let date = moment().startOf('month') //当月第一天
      let y = date.get('year')
      let m = date.get('month') + 1
      let d = date.get('date')
      let startDateString = y + '-' + m + '-' + d

      let date1 = moment().endOf('month') //当月最后一天
      let yy = date1.get('year')
      let mm = date1.get('month') + 1
      let dd = date1.get('date')
      let endDateString = yy + '-' + mm + '-' + dd
      return {startDay:startDateString,endDay:endDateString}
    },
    dateChange(m,s){
     this.classTime=m
     this.queryParam.start_time=s[0]
      this.queryParam.end_time=s[1]
    },
    monthChange(e, s) {
      console.log(e, s)
    },
    goAdd() {
      let type = 2
      this.$router.push({
        // path:`/finance/wageSettlementExpand/add_settlement/${type}`,
        name: 'add_settlement',
        params: {
          type,
        },
      })
    },
    exportDetails() {
      achievementExport({ school_id: this.school_id })
        .then((res) => {
          this.$message.success('导出成功')
          window.location.href = res.url.url + res.url.path
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.btn-list {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.mr10 {
  margin-right: 10px;
}
</style>